<template>
  <div>
    <div class="avatar-upload">
      <el-avatar shape="square" :size="200" :src="url" @error="() => true">
        <img :src="$ErrorImg">
      </el-avatar>
      <div class="upload-btn">
        <el-upload action="" :multiple="false" :show-file-list="false" :auto-upload="false" :on-change="handleOnChange">
          <el-button size="small" type="info" plain>修改</el-button>
        </el-upload>
      </div>
    </div>
    <el-dialog title="上传图片" :visible.sync="visible" :append-to-body="true" :close-on-click-modal="false" fullscreen>
      <div class="cropper-main">
        <div>
          <vue-cropper class="cropper" ref="cropper" :img="img" output-type="png" can-scale auto-crop info-true @realTime="realTime" />
        </div>
        <!--预览效果图-->
        <div>
          <div class="show-preview">
            <div :style="previews.div" class="preview">
              <img :src="previews.url" :style="previews.img">
            </div>
          </div>
        </div>
      </div>
      <div class="btn-group">
        <el-button type="success" plain icon="el-icon-plus" @click="handleScaleBig">放大</el-button>
        <el-button type="success" plain icon="el-icon-minus" @click="handleScaleSmall">缩小</el-button>
        <el-button type="success" plain icon="el-icon-refresh-left" @click="handleRotateLeft">左旋转</el-button>
        <el-button type="success" plain icon="el-icon-refresh-right" @click="handleRotateRight">右旋转</el-button>
        <el-button type="primary" style="margin-right: 20%;" @click="submit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" src="./img-cropper.ts" />

<style lang="less" scoped>
.avatar-upload {
  position: relative;
  display: inline-flex;
  .upload-btn {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
.cropper-main {
  display: flex;
  justify-content: space-evenly;
  & > div {
    width: 45%;
  }
}
.cropper {
  height: 500px !important;
  // width: 700px !important;
}
.show-preview {
  flex: 1;
  -webkit-flex: 1;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  .preview {
    overflow: hidden;
    background: #cccccc;
  }
}
.btn-group {
  height: 60px;
  line-height: 60px;
  text-align: right;
}
</style>
